[V0_FILE]typescriptreact:file="property-sale-prices-table.tsx" isEdit="true" import React, { useState } from "react" import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Switch } from "@/components/ui/switch" import { Input } from "@/components/ui/input" import { ChevronDown, ChevronUp, Flame, TreesIcon as Tree, Building2, DollarSign, SquareIcon as SquareFoot, LayoutGrid, Ruler, Droplets, } from "lucide-react" // Sample data for individual addresses const addressData = { "R3 - Medium Density Residential": [ { address: "123 Main St", price: 740000, area: 250, fsr: 1.5, hob: 14, bushfire: true, biodiversity: false, flood: true, date: "2023-05-15", }, { address: "456 Oak Ave", price: 760000, area: 260, fsr: 2.0, hob: 21, bushfire: false, biodiversity: true, flood: false, date: "2023-06-22", }, { address: "789 Pine Rd", price: 750000, area: 255, fsr: 3.0, hob: 30, bushfire: true, biodiversity: true, flood: false, date: "2023-07-03", }, ], "R4 - High Density Residential": [ { address: "101 High St", price: 840000, area: 180, fsr: 1.5, hob: 14, bushfire: false, biodiversity: false, flood: true, date: "2023-05-30", }, { address: "202 Tower Ave", price: 860000, area: 190, fsr: 2.0, hob: 21, bushfire: true, biodiversity: false, flood: false, date: "2023-06-18", }, { address: "303 Skyline Rd", price: 850000, area: 185, fsr: 3.0, hob: 30, bushfire: false, biodiversity: true, flood: true, date: "2023-07-10", }, ], "MU1 - Mixed Use": [ { address: "505 Commerce St", price: 940000, area: 300, fsr: 1.5, hob: 14, bushfire: true, biodiversity: true, flood: false, date: "2023-05-25", }, { address: "707 Market Ave", price: 960000, area: 310, fsr: 2.0, hob: 21, bushfire: false, biodiversity: false, flood: true, date: "2023-06-29", }, { address: "909 Business Rd", price: 950000, area: 305, fsr: 3.0, hob: 30, bushfire: true, biodiversity: false, flood: false, date: "2023-07-15", }, ], } const propertyData = [ { zone: "R3 - Medium Density Residential", color: "#FF776E", fsr15: 750000, fsr20: 900000, fsr30: 1200000, }, { zone: "R4 - High Density Residential", color: "#FF483B", fsr15: 850000, fsr20: 1050000, fsr30: 1400000, }, { zone: "MU1 - Mixed Use", color: "#959DC2", fsr15: 950000, fsr20: 1200000, fsr30: 1600000, }, ] export default function PropertySalePricesTable() { const [expandedZone, setExpandedZone] = useState(null) const [showStrata, setShowStrata] = useState(false) const [showPricePerSqm, setShowPricePerSqm] = useState(false) const [selectedValues, setSelectedValues] = useState<{ [key: string]: number }>({}) const toggleExpand = (zone: string) => { setExpandedZone(expandedZone === zone ? null : zone) } const formatPrice = (price: number, area: number) => { if (showPricePerSqm) { const pricePerSqm = Math.round(price / area) return `$${pricePerSqm.toLocaleString()}/m²` } return `$${price.toLocaleString()}` } const handleSelectValue = (zone: string, value: number) => { setSelectedValues((prev) => ({ ...prev, [zone]: value })) } const handleManualInput = (zone: string, value: string) => { const numValue = Number.parseFloat(value.replace(/[^0-9.]/g, "")) if (!isNaN(numValue)) { setSelectedValues((prev) => ({ ...prev, [zone]: numValue })) } } return (

Property Sale Price Picker

Strata

Show $/m²

Property Sale Prices by Land Zone, FSR, and HOB Land Zone FSR 1.5:1
HOB 14m FSR 2.0:1
HOB 21m FSR 3.0:1
HOB 30m Selected Value {propertyData.map((item) => ( toggleExpand(item.zone)}>

{item.zone}

{expandedZone === item.zone ? : }

{formatPrice(item.fsr15, 250)} {formatPrice(item.fsr20, 250)} {formatPrice(item.fsr30, 250)} handleManualInput(item.zone, e.target.value)} onClick={(e) => e.stopPropagation()} className="w-full text-right" /> {expandedZone === item.zone && (

Individual Addresses:

{address.address} {formatPrice(address.price, address.area)} ({address.date})

{address.area} m² FSR {address.fsr}:1 HOB {address.hob}m Bushfire: {address.bushfire ? "✓" : "✗"} Biodiversity: {address.biodiversity ? "✓" : "✗"} Flood: {address.flood ? "✓" : "✗"} {showStrata && ( Strata )}

)} ))}

) } [V0_FILE]css:file="styles/table-custom.css" isEdit="true" .bg-navy { background-color: #000080; } /* Make the table more compact */ .compact-table th, .compact-table td { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Ensure the colored squares are the right size and visible */ .zone-color { width: 1rem; height: 1rem; display: inline-block; flex-shrink: 0; border: 1px solid #000; } /* Style for the expanded row */ .expanded-row { background-color: #f3f4f6; transition: all 0.3s ease-in-out; } /* Hover effect for clickable rows */ .compact-table tbody tr:hover { background-color: #f3f4f6; }

About

Tags

Share

About

Tags

Share

More from spitfire8790

More Templates Like This